<template>
  <button @click="open">打开</button>
  <button @click="open2">打开</button>

  <x-mask v-model:visible="visible" :top="10" :showClose="false">
    <view style="height: 100%;background-color: blue;">
      <view>我是聂荣水电费</view>
      <view>我是聂荣水电费</view>
      <view>我是聂荣水电费</view>
    </view>
    <template #right>
      <button @click.stop="visible = false">关闭</button>
    </template>
  </x-mask>

  <x-mask ref="maskRef">
    <view>
      <view>我是聂荣水电费</view>
      <view>我是聂荣水电费</view>
      <view>我是聂荣水电费</view>
    </view>
    
  </x-mask>
</template>
<script setup lang="ts">
  import { ref } from "vue";
  const visible = ref(false);

  const maskRef = ref()

  const open = () => {
    visible.value = true;
  };

  const open2 = () => {
    maskRef.value?.open()
  };
</script>
